<template>
    <div class="whole-page">
      <el-container>
        <el-aside width="30%" >
          <div class="org-sidebar" height="45vh">
            <div class="org-info">
              <h2>{{ org.display_name }}</h2>
              <p class="org-info-item">机构ID: {{ org.id }}</p>
              <p class="org-info-item">机构类型: {{ org.type }}</p>
              <p class="org-info-item">机构简称: <span v-if="org.display_name_acronyms && org.display_name_acronyms.length > 0">{{ org.display_name_acronyms.join(', ') }}</span><span v-else>暂无简称</span></p>
              <el-image class="org-logo" :src="org.image_url" alt="组织头像" ></el-image>
            </div>
            <div class="org-lineage" height="45vh">
              <h3>相关机构</h3>
              <el-menu class="org-lineage-menu">
                <el-menu-item v-for="linkOrg in link_org" :key="linkOrg.id" @click="toOrg(linkOrg.id)">
                  <div>{{ linkOrg.display_name }}</div>
                </el-menu-item>
              </el-menu>
            </div>
          </div>
        </el-aside>
        <el-scrollbar style="height: 100vh;width: 70%;">
          <el-main class="main-content">
            <h3>相关学者</h3>
            <el-table :data="currentScholars" stripe style="width: 100%;height: auto;">
              <el-table-column prop="display_name" label="学者"></el-table-column>
              <el-table-column prop="last_known_institution.display_name" label="组织" width="200px"></el-table-column>
              <el-table-column prop="works_count" label="文献数"></el-table-column>
              <el-table-column prop="cited_by_count" label="文献被引用数"></el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button @click.stop="toScholar(scope.row.id)" type="primary" size="mini">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination-container">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="pageSize"
              layout="total, prev, pager, next, jumper"
              :total="totalScholars"
            />
            </div>
          </el-main>
        </el-scrollbar>
      </el-container>
    </div>
  </template>
  <script>
  import { ElMessage } from 'element-plus';
  import { req_getOrgInfo, req_getScholarsByLastKnownInstitution } from '/src/api';
  
  export default {
    name: "OrgView",
    data() {
      return {
        currentPage: 1,
        pageSize: 8,
        totalScholars: 0,
        scholars: [],
        currentScholars: [],
        link_org: [],
        org: {},
      };
    },
    created() {
      // 初始化时获取数据
      this.getOrgInfo();
      this.getOrgScholars();
      // this.initOrgId();
    },
    watch: {
      // 监听路由参数的变化
      '$route.params.org_id': {
        handler: 'handleOrgIdChange',
        immediate: true, // 立即执行，确保在组件创建时也能处理
      },
    },
    methods: {
      handleOrgIdChange(newOrgId, oldOrgId) {
        this.getOrgInfo();
        this.getOrgScholars();
      },
      async getOrgInfo() {
        try {
          let currentUrl = window.location.href;
          let orgid = currentUrl.match(/\/([^\/]+)\/?$/)[1];
          // let orgid = "I114027177";
          let response = await req_getOrgInfo(orgid);
          let data = response.data;
          if (data['errno'] === 1) {
            this.org = data['org'];
            this.link_org = this.org.associated_institutions;
          }
        } catch (error) {
          ElMessage.error("getorgInfo error!");
        }
      },
      async getOrgScholars() {
        try {
          let currentUrl = window.location.href;
          let orgid = currentUrl.match(/\/([^\/]+)\/?$/)[1];
          // console.log(orgid);
          let response = await req_getScholarsByLastKnownInstitution(orgid);
          let data = response.data;
          if (data['errno'] === 1) {
            this.scholars = data['results'];
            this.totalScholars = this.scholars.length;
            this.sliceScholars();
          }
        } catch (error) {
          ElMessage.error("getOrgScholars error!");
        }
      },
      toScholar(id) {
        this.$router.push({
          path: `/scholar/${id}`,
        });
      },
      toOrg(id) {
        this.$router.replace({
          path: `/org/${id}`,
        });
      },
      sliceScholars() {
        const startIndex = (this.currentPage - 1) * this.pageSize;
        const endIndex = startIndex + this.pageSize;
        this.currentScholars = this.scholars.slice(startIndex, endIndex);
      },
      handleCurrentChange(newPage) {
        this.currentPage = newPage;
        this.sliceScholars();
      },
    },
  };
  </script>
  
<style scoped>
.whole-page {
    padding-left: 50px;
    padding-right: 50px;
}
.el-aside{
  height: auto;
}
.org-sidebar {
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
}
  
.org-info h2 {
    font-size: 24px;
    margin-bottom: 10px;
}
  
.org-info-item {
    font-size: 14px;
    margin: 5px 0;
}
  
.org-logo {
    margin-top: 10px;
    border-radius: 8px;
    width: 180px;
    height: 120px;
}
  
.org-lineage {
    margin-top: 20px;
}
  
.org-lineage h3 {
    font-size: 18px;
    margin-bottom: 10px;
}
  
.org-lineage-menu {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #fff;
    height: 40vh;
    overflow-y: auto;
}
  
.main-content {
    min-height: 100vh;
    overflow: auto;
}
  
.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
  
.el-pagination {
    margin-top: 10px;
}
  
</style>
  